// 导入路由
import router, { asyncRoutes } from './router'
import store from './store'
import getPageTitle from '@/utils/get-page-title'

// 导入进度条插件
import NProgress from 'nprogress'
// 导入进度条样式
import 'nprogress/nprogress.css'

// 白名单
const whiteList = ['/login', '/404']
// 创建前置路由
router.beforeEach(async(to, from, next) => {
  document.title = getPageTitle(to.meta.title)
  // 获取token
  const token = store.state.user.token
  // 启动进度条
  NProgress.start()
  // 判断token是否存在
  if (token) {
    // 是否登录
    if (to.path === '/login') {
      next('/')
    } else {
      // 获取用户信息的时机
      // 1.需要有token
      // 2.需要在跳转页面之前
      // *****************************************************************************************
      // 动态路由*动*动态路由*动态路由*动态路由*动态路由*动态路由*动态路由*动态路由*动态路由*态路由*动态路由
      // 动态路由设置时机判断登录后还没渲染之前是否有员工id
      // 1. 判断是否存在用户信息(已经将用户信息存到vuex中了)
      if (!store.getters.userId) {
        // 2. 若没有用户信息 需要获取用户信息 获取到后端返回的用户的权限信息
        const menus = await store.dispatch('user/getUserInfo')
        // 3. 根据后台返回的权限信息,从本地预置的 8 个路由里面筛选出当前用户有权访问的路由
        const filterRoutes = asyncRoutes.filter(route => {
          // 获取每一个路由规则的名称
          const routeName = route.children[0].name
          // 判断获取到的路由名称在不在 menus 权限信息中
          return menus.includes(routeName)
        })
        // 4. 使用 Vue-router 提供的addRouter 方法, 将筛选出来的动态路由添加到路由对象中
        // 解决页面刷新报404的bug 静态路由后面有一个通配符路由 将它注释再把它添加到动态路由之后
        filterRoutes.push({ path: '*', redirect: '/404', hidden: true })
        router.addRoutes(filterRoutes)

        // 5. 左侧菜单是从 Vue-router 的 routes 获取的数据进行渲染,将左侧菜单数据的获取方式进行调整(vuex)
        // 将动态路由传递给 mutation 方法，进行合并
        store.commit('permission/setRoutes', filterRoutes)

        // 切换用户以后,新的用户访问不了上一个用户的菜单的情况
        // 获取当前用户的最终路由,检查该用户是否能访问,上一个用户退出登录所在的界面 如果在就放行,不在就进入主页
        const allPath = store.state.permission.routes.map(item => item.path)

        // 通过 addRoutes 添加的路由,访问后可能会存在白屏的问题  它是 Vue-router 的已知bug
        // 之前是没有这些动态路由的,然后我们使用 addRoutes 添加以后才有的路由规则
        // 如果这时候想访问动态路由 需要手动告诉 vue-router 我要去哪里
        if (to.path === '/employees/detail') {
          next({
            path: to.fullPath // 解决在三级路由界面时刷新返回主界面的问题
          })
        } else {
          next({
            path: allPath.includes(to.path) ? to.path : '/',
            replace: true
          })
        }
      }
      // 动态路由*动态路由*动态路由*动态路由*动态路由*动态路由*动态路由*动态路由*动态路由*动态路由*动态路由
      // ***********************************************************************************************
      next()
    }
  } else {
    // 判断要访问的路由在不在白名单中
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login')
    }
  }
  // 关闭进度条  token失效时优化用
  NProgress.done()
})

// 后置路由守卫
router.afterEach((to, from) => {
  // 隐藏进度条效果
  NProgress.done()
})

// import router from './router'
// import store from './store'
// // 从element中导入message组件
// import { Message } from 'element-ui'
// // 导入进度条及样式
// import NProgress from 'nprogress' // progress bar
// import 'nprogress/nprogress.css' // progress bar style
// // 导入获取token的方法
// import { getToken } from '@/utils/auth' // get token from cookie
// // 处理页面的标题
// import getPageTitle from '@/utils/get-page-title'

// NProgress.configure({ showSpinner: false }) // NProgress Configuration

// // 白名单
// const whiteList = ['/login'] // no redirect whitelist

// // 前置路由守卫
// router.beforeEach(async(to, from, next) => {
//   // 开始显示进度条
//   NProgress.start()

//   // 设置页面标题
//   document.title = getPageTitle(to.meta.title)

//   // 获取储存的token
//   const hasToken = getToken()

//   if (hasToken) {
//     // 如果登陆了 访问的有事登录界面 直接跳转到主页
//     if (to.path === '/login') {
//       // if is logged in, redirect to the home page
//       next({ path: '/' })
//       NProgress.done()
//     } else {
//       // 获取用户信息
//       const hasGetUserInfo = store.getters.name
//       if (hasGetUserInfo) {
//         next()
//       } else {
//         try {
//           // 如果没有用户的信息,需要现行获取用户信息
//           await store.dispatch('user/getInfo')

//           next()
//         } catch (error) {
//           // 如果没有用户信息 尝试获取还获取不到就删除token并跳转到登录界面
//           await store.dispatch('user/resetToken')
//           Message.error(error || 'Has Error')
//           next(`/login?redirect=${to.path}`)
//           NProgress.done()
//         }
//       }
//     }
//   } else {
//     /* has no token*/

//     if (whiteList.indexOf(to.path) !== -1) {
//       // 查看用户访问的页面在不在白名单中,如果在放行
//       next()
//     } else {
//       // 如果没有token要访问的页面又不在白名单中 跳转到登录页
//       next(`/login?redirect=${to.path}`)
//       NProgress.done()
//     }
//   }
// })
// // 后置守卫
// router.afterEach(() => {
//   // finish progress bar
//   NProgress.done()
// })
